<template>
  <div class="moments-view">
    <!-- 日期选择bar -->
    <div class="date-bar-container">
      <div class="date-bar">
        <div class="arrow left-arrow" @click="scrollDates('left')">
          <van-icon name="arrow-left" />
        </div>
        <div class="date-circles" ref="dateCirclesRef">
          <div
            v-for="(date, index) in dateList"
            :key="index"
            class="date-circle"
            :class="{ active: date.isActive }"
            @click="selectDate(index)"
          >
            <div class="day-number">{{ date.dayNumber }}</div>
          </div>
        </div>
        <div class="arrow calendar-arrow" @click="toggleCalendar">
          <van-icon name="arrow-down" />
        </div>
      </div>

      <!-- 月份日历弹出层 -->
      <van-calendar
        v-model:show="showCalendar"
        @confirm="onCalendarConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        :show-confirm="true"
        :round="false"
        position="top"
      />
    </div>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(moment, index) in moments" :key="index" class="moment-container">
        <div class="moment-card">
          <div class="moment-header">
            <img :src="moment.avatar" alt="头像" class="avatar" @click="showUserProfile(moment)" />
            <div class="user-info">
              <span class="username">{{ moment.username }}</span>
              <span class="time">{{ moment.time }}</span>
            </div>
          </div>
          <div class="moment-content">
            <div class="moment-images" v-if="moment.images.length">
              <img v-for="(image, idx) in moment.images" :key="idx" :src="image" alt="动态图片" />
            </div>
            <div class="moment-text">
              <p>{{ moment.content }}</p>
            </div>
          </div>
          <div class="moment-actions">
            <div class="action-buttons">
              <van-icon name="smile-o" @click="showEmojis(index)" />
              <van-icon name="comment-o" @click="showCommentDialog(index)" />
            </div>
          </div>
        </div>

        <div class="moment-comments" v-if="moment.comments.length > 0">
          <div class="comments-grid">
            <div v-for="(comment, idx) in moment.comments" :key="idx" class="comment-card">
              <div class="comment-image" v-if="comment.image">
                <img :src="comment.image" alt="评论配图" />
              </div>
              <div class="comment-content">
                <span class="comment-user">{{ comment.username }}:</span>
                <span class="comment-text">{{ comment.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <!-- 评论弹窗 -->
    <van-dialog
      v-model:show="showCommentPopup"
      title="发表评论"
      :show-confirm-button="false"
      class="comment-dialog"
    >
      <div class="comment-popup-content">
        <van-field
          v-model="currentComment.text"
          placeholder="写评论..."
          rows="3"
          type="textarea"
          maxlength="200"
          show-word-limit
        />

        <div class="image-type-selector">
          <div class="selector-label">选择图片类型：</div>
          <div class="selector-options">
            <div
              class="option-item"
              :class="{ active: currentComment.imageType === 'sticker' }"
              @click="selectImageType('sticker')"
            >
              <svg class="sticker-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                <path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-958.72a448 448 0 1 0 448 448 448 448 0 0 0-448-448z"></path>
                <path d="M241.28 374.187a69.76 69.76 0 1 0 139.52 0 69.76 69.76 0 1 0-139.52 0zM642.133 374.187a69.76 69.76 0 1 0 139.52 0 69.76 69.76 0 1 0-139.52 0zM512 680.32h85.333a30.507 30.507 0 0 1 29.227 40.32 121.173 121.173 0 0 1-228.267 1.28 30.507 30.507 0 0 1 28.374-40.533z"></path>
                <path d="M505.6 1006.293a362.667 362.667 0 0 1 474.24-414.506l-21.333 60.373a298.667 298.667 0 0 0-390.4 341.333z"></path>
              </svg>
              <span>贴纸</span>
            </div>
            <div
              class="option-item"
              :class="{ active: currentComment.imageType === 'illustration' }"
              @click="selectImageType('illustration')"
            >
              <van-icon name="photo" size="20" />
              <span>配图</span>
            </div>
          </div>
        </div>

        <div class="generate-button-wrapper">
          <van-button
            type="primary"
            size="mini"
            @click="generateImage"
            class="generate-button"
          >
            生成{{ currentComment.imageType === 'sticker' ? '贴纸' : '配图' }}
          </van-button>
        </div>

        <div v-if="currentComment.previewImage" class="preview-image">
          <img :src="currentComment.previewImage" alt="预览图片" />
          <van-button size="mini" @click="generateImage">重新生成</van-button>
        </div>

        <div class="comment-popup-buttons">
          <van-button plain size="small" @click="showCommentPopup = false">取消</van-button>
          <van-button
            type="primary"
            size="small"
            @click="addComment"
            :disabled="!currentComment.text.trim()"
          >
            发布
          </van-button>
        </div>
      </div>
    </van-dialog>

    <!-- 个人信息弹窗 -->
    <van-dialog
      v-model:show="showProfilePopup"
      title="个人信息"
      :show-confirm-button="false"
      class="profile-dialog"
      :show-cancel-button="false"
      close-on-click-overlay
      close-on-popstate
    >
      <template #title>
        <div class="custom-title">
          <span>个人信息</span>
          <van-icon name="cross" class="close-icon" @click="showProfilePopup = false" />
        </div>
      </template>
      <div class="profile-popup-content" v-if="currentProfile">
        <div class="profile-header">
          <img :src="currentProfile.avatar" alt="头像" class="profile-avatar" />
          <div class="profile-info">
            <div class="profile-name">{{ currentProfile.username }}</div>
            <div class="profile-details">
              <div class="detail-item">昵称：{{ currentProfile.nickname || '焦糖不焦' }}</div>
              <div class="detail-item">地区：{{ currentProfile.region || '北京' }}</div>
              <div class="detail-item">标签：{{ currentProfile.tags || '老婆们' }}</div>
            </div>
          </div>
        </div>

        <div class="profile-updates">
          <div class="update-count">
            <span class="red-dot"></span>
            <span>{{ currentProfile.updateCount || 3 }}条更新</span>
          </div>
        </div>

        <div class="profile-actions">
          <div class="action-button">
            <div class="icon-wrapper">
              <van-icon name="manager-o" />
              <div class="badge" v-if="currentProfile?.updateCount">{{ currentProfile?.updateCount }}</div>
            </div>
            <span>她的空间</span>
          </div>
          <div class="action-button" @click="handleChatClick">
            <van-icon name="chat-o" />
            <span>发消息</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import router from '@/router';
import { defineComponent, ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { routeLocationKey } from 'vue-router';

interface Comment {
  username: string;
  text: string;
  image?: string;
}

interface Moment {
  avatar: string;
  username: string;
  time: string;
  content: string;
  images: string[];
  likes: number;
  comments: Comment[];
  date?: Date; // 添加日期字段
}

interface UserProfile {
  avatar: string;
  username: string;
  totalLikes: number;
  totalComments: number;
  nickname?: string;
  region?: string;
  tags?: string;
  updateCount?: number;
}

interface DateItem {
  date: Date;
  dayName: string;
  dayNumber: string;
  isActive: boolean;
}

export default defineComponent({
  name: 'MomentsView',
  setup() {
    const moments = ref<Moment[]>([
      {
        avatar: '/chat/role_boy_friend_bg.png',
        username: '男朋友',
        time: '2小时前',
        content: '今日跑步机上的想法：最近每天在工作上花费的精力超过90%，下班再健身，就几乎挤不出空闲的时间了。当工作狂的前提是工作目标与个人成长目标一致。最近...',
        images: ['/pyq/pyq_2.png'],
        likes: 10,
        comments: [
          /* { username: '我', text: '宝宝辛苦了，回头让我检查一下锻炼成果~', image: '/pyq/pyq_2_1.png' }, */
        ],
        date: new Date(), // 今天的日期
      },
    ]);

    const loading = ref(false);
    const finished = ref(false);
    const showCommentPopup = ref(false);
    const showProfilePopup = ref(false);
    const currentMomentIndex = ref(-1);
    const currentProfile = ref<UserProfile | null>(null);
    const currentComment = reactive({
      text: '',
      imageType: 'illustration',
      previewImage: '',
    });

    // 日期选择相关
    const selectedDate = ref(new Date());
    const showCalendar = ref(false);
    const minDate = ref(new Date(new Date().getFullYear() - 1, 0, 1)); // 去年1月1日
    const maxDate = ref(new Date(new Date().getFullYear() + 1, 11, 31)); // 明年12月31日

    
    // 在setup函数内添加日期管理相关的状态和函数

    // 日期范围状态
    const earliestDate = ref<Date>(new Date(new Date().getFullYear(), new Date().getMonth(), 1)); // 当前月第一天
    const latestDate = ref<Date>(new Date()); // 当前日期
    const dateCirclesRef = ref<HTMLElement | null>(null);

    // 生成日期列表，支持无限加载更多日期
    const generateDateList = (centerDate: Date = new Date()): DateItem[] => {
      const list: DateItem[] = [];

      // 生成以centerDate为中心的30天日期
      for (let i = -15; i <= 14; i++) {
        const date = new Date(centerDate);
        date.setDate(centerDate.getDate() + i);

        list.push({
          date: new Date(date),
          dayName: '', // 保留字段但不使用
          dayNumber: date.getDate().toString(),
          isActive: i === 0 // 中心日期高亮
        });
      }

      return list;
    };

    // 使用ref而不是computed
    const dateList = ref<DateItem[]>(generateDateList());

    // 加载更早的日期
    const loadEarlierDates = () => {
      const firstDate = dateList.value[0].date;
      const newEarliestDate = new Date(firstDate);
      newEarliestDate.setDate(firstDate.getDate() - 15); // 向前加载15天

      const newDates: DateItem[] = [];

      // 生成新的日期项
      for (let i = 15; i > 0; i--) {
        const date = new Date(firstDate);
        date.setDate(firstDate.getDate() - i);

        newDates.push({
          date: new Date(date),
          dayName: '',
          dayNumber: date.getDate().toString(),
          isActive: false
        });
      }

      // 将新日期添加到列表前面
      dateList.value = [...newDates, ...dateList.value];
      earliestDate.value = newEarliestDate;

      console.log('加载更早日期，当前最早日期:', newEarliestDate);
    };

    // 选择日期
    const selectDate = (index: number) => {
      // 重置所有日期的激活状态
      dateList.value.forEach(item => {
        item.isActive = false;
      });

      // 设置选中日期为激活状态
      dateList.value[index].isActive = true;
      selectedDate.value = dateList.value[index].date;

      // 这里可以根据选中的日期筛选动态
      // filterMomentsByDate(selectedDate.value);
    };

    // 切换日历显示
    const toggleCalendar = () => {
      showCalendar.value = !showCalendar.value;
    };

    // 日历确认选择
    const onCalendarConfirm = (date: Date) => {
      selectedDate.value = date;
      showCalendar.value = false;

      // 更新日期列表，使选中的日期居中显示
      dateList.value = generateDateList(date);

      // 这里可以根据选中的日期筛选动态
      // filterMomentsByDate(date);
    };

    // 更新日期列表，使选中的日期居中显示
    const updateDateList = (centerDate: Date) => {
      dateList.value = generateDateList(centerDate);
    };

    // 监听滚动事件，固定顶部bar
    const handleScroll = () => {
      // 获取当前在视图中的动态
      // 根据动态的日期更新选中的日期
      // 这里只是一个简单的示例，实际实现可能需要更复杂的逻辑
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      // 简单示例：根据滚动位置切换日期
      // 实际应用中应该根据当前可见的动态内容来确定日期
      if (moments.value.length > 1 && scrollTop > 200) {
        // 假设滚动到200px以下时，显示第二条动态的日期
        if (moments.value[1].date) {
          updateDateList(moments.value[1].date);
        }
      } else {
        // 滚动回顶部时，显示第一条动态的日期
        if (moments.value[0].date) {
          updateDateList(moments.value[0].date);
        }
      }
    };

    // 修改滚动函数，支持无限加载
    const scrollDates = (direction: 'left' | 'right') => {
      const dateCircles = dateCirclesRef.value;
      if (!dateCircles) return;

      const scrollAmount = 200; // 每次滚动的像素数
      const currentScrollLeft = dateCircles.scrollLeft;

      // 检查是否需要加载更多日期
      if (direction === 'left' && currentScrollLeft < 300) {
        // 当滚动到接近左边界时，加载更早的日期
        loadEarlierDates();

        // 保持当前视图位置，避免跳动
        setTimeout(() => {
          if (dateCircles) {
            dateCircles.scrollLeft = currentScrollLeft + 600; // 大约15个日期的宽度
          }
        }, 10);

        return;
      }

      // 正常滚动
      const newScrollLeft = direction === 'left' ? currentScrollLeft - scrollAmount : currentScrollLeft + scrollAmount;

      console.log('滚动方向:', direction);
      console.log('当前位置:', currentScrollLeft);
      console.log('新位置:', newScrollLeft);

      dateCircles.scrollTo({
        left: newScrollLeft,
        behavior: 'smooth'
      });
    };

    // 组件挂载时添加滚动监听
    onMounted(() => {
      window.addEventListener('scroll', handleScroll);

      // 确保日期列表已经生成
      if (dateList.value.length === 0) {
        dateList.value = generateDateList();
      }

      // 设置一个延时，确保DOM已经渲染
      setTimeout(() => {
        const dateCircles = dateCirclesRef.value;
        if (dateCircles) {
          // 初始滚动位置，使当前日期居中
          const initialScrollPosition = (dateCircles.scrollWidth - dateCircles.clientWidth) / 2;
          dateCircles.scrollLeft = initialScrollPosition;
          console.log('初始化滚动位置:', initialScrollPosition);
        }
      }, 100);
    });

    // 组件卸载时移除滚动监听
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });

    const onLoad = () => {
      loading.value = true;
      setTimeout(() => {
        moments.value.push({
            avatar: '/chat/role_jichenv_head.png',
            username: '张秋月',
            time: '1小时前',
            content: `我要美黑! ←be like this 谁赞成谁反对！`,
            images: ['/pyq/pyq_1.png'],
            likes: 5,
            comments: [],
            date: new Date(new Date().setDate(new Date().getDate() - 1)), // 昨天的日期
        },{
            avatar: '/chat/role_baimaonan_head.png',
            username: '张泽',
            time: '2小时前',
            content: '好像再亲密的关系，也需要撒一些小谎。\n去海南旅游，沙滩上女朋友大开脑洞，问如果自己变成了海蟑螂，我还会不会喜欢她。\n我说我会把她养起来。其实...',
            images: ['/pyq/pyq_3.png'],
            likes: 5,
            comments: [],
            date: new Date(new Date().setDate(new Date().getDate() - 1)), // 昨天的日期
        });
        loading.value = false;
        finished.value = true;
      }, 1000);
    };


    const handleChatClick = () => {
      router.push(`/chat/男朋友`);
    };


    const showCommentDialog = (index: number) => {
      currentMomentIndex.value = index;
      currentComment.text = '';
      currentComment.previewImage = '';
      showCommentPopup.value = true;
    };

    const showEmojis = (index: number) => {
      // 这里可以实现表情选择功能
      console.log('显示表情', index);
    };

    const selectImageType = (type: string) => {
      currentComment.imageType = type;
    };

    const generateImage = () => {
      const type = currentComment.imageType;
      // 使用提供的图片作为生成结果
      if (type === 'sticker') {
        currentComment.previewImage = '/pyq/pyq_1.png';
      } else {
        currentComment.previewImage = '/pyq/pyq_2_1.png';
      }
    };

    const addComment = () => {
      if (currentComment.text.trim() && currentMomentIndex.value >= 0) {
        // 如果没有预览图片，先生成一个
        if (!currentComment.previewImage) {
          generateImage();
        }

        moments.value[currentMomentIndex.value].comments.push({
          username: '我',
          text: currentComment.text.trim(),
          image: currentComment.previewImage
        });

        // 重置并关闭弹窗
        currentComment.text = '';
        currentComment.previewImage = '';
        showCommentPopup.value = false;
      }
    };

    const showUserProfile = (moment: Moment) => {
      // 设置当前用户资料
      currentProfile.value = {
        avatar: moment.avatar,
        username: moment.username,
        totalLikes: moment.likes,
        totalComments: moment.comments.length,
        updateCount: 3 // 确保显示更新数量为3
      };

      // 显示个人信息弹窗
      showProfilePopup.value = true;
    };

    return {
      moments,
      loading,
      finished,
      showCommentPopup,
      showProfilePopup,
      currentComment,
      currentProfile,
      dateList,
      selectedDate,
      showCalendar,
      minDate,
      maxDate,
      onLoad,
      handleChatClick,
      showCommentDialog,
      showEmojis,
      selectImageType,
      generateImage,
      addComment,
      showUserProfile,
      selectDate,
      toggleCalendar,
      onCalendarConfirm,
      dateCirclesRef,
      scrollDates,
    };
  },
});
</script>

<style scoped>
.moments-view {
  padding: 12px;
  padding-top: 6px;
  background: #fff;
  min-height: 100vh;
}

/* 日期选择bar样式 */
.date-bar-container {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 6px 0;
  margin-bottom: 6px;
}

.date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  width: 100%;
}

/* 确保日期条容器宽度固定，只能容纳7个圆圈 */
.date-circles {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  flex: 1;
  padding: 0 2px;
  width: 308px; /* 精确控制宽度：(40px圆圈宽度 + 4px间距) * 7个圆圈 = 308px */
}

.date-circles::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.date-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.date-circle.active {
  color: rgb(35, 34, 34);
  border-color: #FFFBF0;
  border: 1px solid #ddab23;
}

.day-number {
  font-size: 14px;
  font-weight: bold;
}

.arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background-color: #ffffff;
  margin: 0 1px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.arrow:hover {
  background-color: #f5f7fa;
}

.calendar-arrow {
  margin-left: 2px;
}

.moment-container {
  margin-bottom: 8px;
  position: relative;
}

.moment-card {
  background:  #FFFBF0;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}

.moment-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 8px;
  object-fit: cover;
  cursor: pointer; /* 添加鼠标手型指针 */
}

.user-info {
  display: flex;
  flex-direction: column;
  padding: 2px 6px;
  margin-top: 3px;
}

.username {
  font-weight: bold;
  font-size: 13px;
  color: #000;
  line-height: 1.2;
}

.time {
  font-size: 10px;
  color: #555;
  margin-top: 1px;
  line-height: 1.2;
}

.moment-content {
  display: flex;
  margin-bottom: 6px;
}

.moment-images {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 16px;
}

.moment-images img {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
}

.moment-text {
  flex: 1;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.5;
}

.moment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.action-buttons {
  display: flex;
  gap: 16px;
}

.likes-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.moment-comments {
  margin-top: 5px;
  background: #fff;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.comment-card {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 8px; /* 添加小圆角 */
  overflow: hidden;
}

.comment-image {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.comment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px; /* 添加小圆角 */
}

.comment-content {
  flex: 1;
  padding: 6px;
  font-size: 12px;
}

.comment-user {
  font-weight: bold;
  font-size: 12px;
}

.comment-text {
  margin-left: 4px;
  font-size: 12px;
}

/* 评论弹窗样式 */
.comment-popup-content {
  padding: 16px;
}

.image-type-selector {
  margin: 14px 0;
}

.selector-label {
  font-size: 12px;
  color: #323233;
  margin-bottom: 6px;
}

.selector-options {
  display: flex;
  gap: 16px;
}

.option-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid #ebedf0;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item.active {
  background-color: #f2f8ff;
  border-color: #1989fa;
  color: #1989fa;
}

.option-item .van-icon {
  margin-bottom: 2px;
}

.sticker-icon {
  margin-bottom: 2px;
  fill: currentColor;
}

.option-item.active .sticker-icon {
  fill: #1989fa;
}

.option-item span {
  font-size: 11px;
}

.generate-button-wrapper {
  margin: 12px 0;
  display: flex;
  justify-content: center;
}

.generate-button {
  font-size: 11px;
  height: 28px;
  padding: 0 12px;
  line-height: 1;
  border-radius: 999px;
}

.preview-image {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.preview-image img {
  width: 200px;
  height: 200px;
  border-radius: 6px; /* 添加小圆角 */
  object-fit: cover;
}

.comment-popup-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.comment-popup-buttons .van-button {
  font-size: 12px;
  height: 32px;
  border-radius: 999px;
}

/* 个人信息弹窗样式 */
.profile-popup-content {
  padding: 20px 16px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: bold;
  color: #323233;
  margin-bottom: 8px;
}

.profile-details {
  font-size: 13px;
  color: #646566;
}

.detail-item {
  margin-bottom: 4px;
}

.profile-updates {
  display: none; /* 隐藏原来的更新提示 */
}

.update-count {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.red-dot {
  width: 8px;
  height: 8px;
  background-color: #ee0a24;
  border-radius: 50%;
  margin-right: 6px;
}

.profile-actions {
  display: flex;
  justify-content: space-around;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  position: relative;
}

.icon-wrapper {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ee0a24;
  color: white;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.action-button .van-icon {
  font-size: 24px;
  margin-bottom: 6px;
  color: #323233;
}

.action-button span {
  font-size: 13px;
  color: #323233;
}

:deep(.van-dialog) {
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  overflow: hidden;
}

:deep(.van-dialog__header) {
  padding: 16px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

:deep(.van-field__word-limit) {
  font-size: 11px;
}

:deep(.van-field__control) {
  font-size: 13px;
}

:deep(.custom-title) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8px;
}

:deep(.close-icon) {
  cursor: pointer;
  font-size: 16px;
  color: #969799;
}

:deep(.close-icon:hover) {
  color: #323233;
}
</style>
